<template>
	<div class="sn-code">
		<el-card>
			<div class="header">
				<el-button type="primary" @click="addSN">新增SN码</el-button>
				<el-input v-model="searchKeyword" placeholder="搜索物料编码/名称/批次号" style="width: 250px; margin-left: 10px"
					clearable />
			</div>

			<el-table :data="filteredSNs" style="width: 100%; margin-top: 20px" border stripe>
				<el-table-column prop="snId" label="SN编号" sortable></el-table-column>
				<el-table-column prop="materialCode" label="物料编码" sortable></el-table-column>
				<el-table-column prop="materialName" label="物料名称" sortable></el-table-column>
				<el-table-column prop="batchNo" label="批次号" sortable></el-table-column>
				<el-table-column prop="quantity" label="数量" sortable></el-table-column>
				<el-table-column fixed="right" label="操作" width="180">
					<template #default="scope">
						<el-button size="small" type="primary" @click="editSN(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteSN(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 编辑/新增弹窗 -->
		<el-dialog v-model="dialogVisible" title="SN码信息" width="500px">
			<el-form :model="currentSN" label-width="100px">
				<el-form-item label="SN编号">
					<el-input v-model="currentSN.snId" />
				</el-form-item>
				<el-form-item label="物料编码">
					<el-input v-model="currentSN.materialCode" />
				</el-form-item>
				<el-form-item label="物料名称">
					<el-input v-model="currentSN.materialName" />
				</el-form-item>
				<el-form-item label="批次号">
					<el-input v-model="currentSN.batchNo" />
				</el-form-item>
				<el-form-item label="数量">
					<el-input-number v-model="currentSN.quantity" :min="1" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveSN">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 模拟数据
const sns = ref([
	{ snId: 'SN202405001', materialCode: 'MAT1001', materialName: '阿莫西林原料', batchNo: 'BATCH001', quantity: 100 },
	{ snId: 'SN202405002', materialCode: 'MAT1002', materialName: '布洛芬原料', batchNo: 'BATCH002', quantity: 200 },
	{ snId: 'SN202405003', materialCode: 'MAT1003', materialName: '维生素C原料', batchNo: 'BATCH003', quantity: 150 },
	// 其他12条模拟数据
])

for (let i = 4; i <= 15; i++) {
	sns.value.push({
		snId: `SN2024050${i}`,
		materialCode: `MAT10${i}`,
		materialName: `医药原料${i}`,
		batchNo: `BATCH00${i}`,
		quantity: 50 + i * 10
	})
}

const searchKeyword = ref('')
const dialogVisible = ref(false)
const currentSN = ref({})

// 筛选
const filteredSNs = computed(() =>
	sns.value.filter(s =>
		s.snId.includes(searchKeyword.value) ||
		s.materialCode.includes(searchKeyword.value) ||
		s.materialName.includes(searchKeyword.value) ||
		s.batchNo.includes(searchKeyword.value)
	)
)

// 新增SN码
const addSN = () => {
	currentSN.value = { snId: '', materialCode: '', materialName: '', batchNo: '', quantity: 1 }
	dialogVisible.value = true
}

// 编辑SN码
const editSN = (row) => {
	currentSN.value = { ...row }
	dialogVisible.value = true
}

// 保存SN码
const saveSN = () => {
	if (!currentSN.value.snId || !currentSN.value.materialCode) {
		ElMessage.error('SN编号和物料编码不能为空')
		return
	}
	const index = sns.value.findIndex(s => s.snId === currentSN.value.snId)
	if (index >= 0) {
		sns.value[index] = { ...currentSN.value }
		ElMessage.success('SN码已更新')
	} else {
		sns.value.push({ ...currentSN.value })
		ElMessage.success('SN码已新增')
	}
	dialogVisible.value = false
}

// 删除SN码
const deleteSN = (row) => {
	ElMessageBox.confirm('确认删除该SN码记录吗？', '提示', { type: 'warning' })
		.then(() => {
			sns.value = sns.value.filter(s => s.snId !== row.snId)
			ElMessage.success('SN码已删除')
		})
		.catch(() => { })
}
</script>

<style scoped>
.sn-code .header {
	display: flex;
	align-items: center;
	gap: 10px;
}
</style>
  
